<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>consolact</title>
 </head>
 <body>
   <div class="wrap" style="width:80ch;height:40ch;"></div>
  <script type="module">
	import Consolact from './index.js';
	let str = 'echo "hello world~!" > a.txt';
	str = `你好吗,<span>xx  </span>
		$<a:shift crlf="0" from="." to="#">
			<a:spare name="sp-1"><span style="color:yellow">o</span></a:spare>
			$[...<span style="color:gray">.......</span><a:shift from="re:\\w" interval="1000">.xab.</a:shift>]<a:shift from="^">^^^^</a:shift>/<a:shift to="@{sp-1}">......</a:shift>
		</a:shift>
		<a:sync crlf="false" cstart="#">
		#xxxx
		#asfsadf
		#<a href="http://www.baidu.com">百度</a>
		#<a:box speed="0">xzzzz</a:box>
		#<span style="color:gray"><b>为什么</b>这样子</span>
		</a:sync>
		$<span style="color:red">abcdef</span>
		$<a href="http://xxxxx"><label>12345</label></a>
		<a:undo>this is <b>undo</b> text,<a:undo delay='3000'>xxxxxxxxxxxx</a:undo>hahaha</a:undo>hello 
		\\<span>xxx</span>
	`;
	str = '<a:shift from="*" to="-" relapse="30" relapsed="✓" gradual="true"><a:sync>*  download...*</a:sync></a:shift>';
	str = '<a:shift from="." to=".." relapse="10"><a:box speed="-1">download...</a:box></a:shift>';
	str = `<a:spare name="spareA"><span style="color:red">skip</span></a:spare><a:shift from="concurrent" to="@{spareA}">test.concurrent 标记并行运行的连续测试。</a:shift>`;
	//*
	str = `
		|<a:wrap speed="-1" crlf="false"><style>${[
				'.gray{color:#4d4d4d}',
				'.green{color:#4ebf22}'
			].join('')}</style>
		|</a:wrap>
		|☞  <a:undo delay="300">touc</a:undo>echo "\\<h1>Hello, world\\</h1>" > index.html
		|☞  <a:wrap delay="2000">echo "my-example-<a:wrap delay="500"></a:wrap>cast.surge.sh" > CNAME</a:wrap>
		|☞  surge ./
		|<a:wrap speed="-1" delay="500">
			|<a:wrap class="gray">             email:</a:wrap> kenneth@chloi.io
			|<a:wrap class="gray">             token: *****************</a:wrap>
			|<a:wrap class="gray">      project path:</a:wrap> /Users/Kenneth/Desktop/temp-example
			|<a:wrap class="gray">              size:</a:wrap> 2 files, 47 bytes
			|<a:wrap class="gray">            domain:</a:wrap> my-example-cast.surge.sh
			|<a:wrap class="gray">            upload:</a:wrap> [====================] 100%, eta: 0.0s
			|<a:wrap class="gray">  propagate on CDN:</a:wrap> [====================] 100%
			|<a:wrap class="gray">             users:</a:wrap> kenneth@chloi.io
			|<a:wrap class="gray">        IP address:</a:wrap> 192.241.214.148
			|
			|	<a:wrap class="green">Success!</a:wrap> Project is published and running at <a:wrap class="green">my-example-cast.surge.sh</a:wrap>
		|</a:wrap>
		|☞  <a:wrap delay="2000">exit</a:wrap>
	`;
	//*/
	const consolact = new Consolact({content:str, cstart : '|'}).print({$el:document.querySelector('.wrap')});
	console.info(consolact.segment);

	document.addEventListener('dblclick', () => {
		if( consolact.pausing ){
			consolact.resume();
		}
		else {
			consolact.pause();
		}
	});
  </script>
 </body>
</html>
